<template>
  <div class="aside">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <el-sub-menu
        v-for="item in router.options.routes[2].children"
        :key="item.path"
        :index="item.path"
      >
        <template #title>
          <!-- <el-icon><location /></el-icon> -->
          <span>
            <img :src="item.meta.icon" alt="" />
            {{ item.meta.title }}</span
          >
        </template>
        <el-menu-item-group v-for="items in item.children" :key="items.path">
          <el-menu-item :index="items.path">{{
            items.meta.title
          }}</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Vue } from "vue-class-component";
import { useRouter } from "vue-router";
export default class Aside extends Vue {
  router = useRouter();
  handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
  handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
  };
  mounted() {
    // console.log("获取路由规则", this.router.options.routes[2].children);
  }
}
</script>

<style lang="less" scoped>
.aside {
  width: 2rem;

  .el-menu-vertical-demo {
    margin-top: 0.1rem;
    width: 2rem;
    height: 7.96rem;
    background: rgba(255, 255, 255, 1);
  }
  span {
    display: flex;
    img {
      margin-right: .16rem;
      align-self: center;
      width: 0.18rem;
      height: 0.18rem;
      border: .01rem dashed #adafb3;;
    }
  }
}
</style>